<style type="text/css">
	#overlay { display: block;}
</style>
<input type="hidden" name="selected-date" value="" />
<div id="main-container">

	<div id="main-home" class="curve profile">		
		<div id="image">
			<?php
				if($user['image_id'])
					echo "		<img src='".base_url()."home/viewimage/".$user['image_id']."' title='No Image' alt='No Image' width='100' />";
				else
					echo "		<img src='".base_url()."css/images/default.jpg' title='No Image' alt='No Image' width='100' />";
			?>
		</div>
		<div id="details">
			<div id="left">
				<p><label>Name:</label><span><?php echo $user['fullname'] ?></span></p>
				<p><label>Position:</label><span><?php echo $user['position_name'] ?></span></p>
				<p><label>Team:</label><span><?php echo $user['group_name'] ?></span></p>
				<p><label>Manager:</label><span><?php echo $user['manager'] ?></span></p>
			</div>
			<div id="right">
				<div id="clock"></div>
			</div>
			<div class="clear"></div>
		</div>		
		<!--details-->
		<div class="clear"></div>
	</div>
	<!--profile-->	
	<div id="main-home" class="curve main-calendar">
		<div id="overlay" class="curve"></div>
		<div id="calendar"></div>
	</div>

	<div class="balloon">
		<div class="close"><a href="javascript:hideBalloon();"></a></div>
		<span>Apply for:</span>
		<p>
			<ul>
				<li><a href="javascript:void(0)" id="apply-leave">Leave</a></li>
				<li><a href="javascript:void(0)" id="apply-overtime">Overtime</a></li>
				<li><a href="javascript:void(0)" id="apply-punch">Punch Alteration</a></li>
			</ul>
		</p>
		<div class="tail"></div>
	</div>
	
</div>
	
	<div id="main" class="dialog leave-dialog">	
		<form class="form" id="form-leave" method="POST">
			<div id="overlay" class="curve"></div>
			<!--overlay-->
			<div class="section">
				<div id="row">
					<p>
						<label>Leave Type:</label>
						<select id="leave-id">
							<option value="">- Select -</option>
							<?php
								$disabled = ($l['available_days']===0) ? 'disabled="disabled"' : '';
								foreach($leaves as $l) echo '<option '.$disabled.' id="'.$l['available_days'].'" value="'.$l['leave_id'].'">'.$l['leave_name'].' ('.$l['available_days'].')</option>'; 
							?>
						</select>
					</p>
					<p>
						<label>From:</label><input id="leave-from" title="From" class="validate[required, custom[dateFormat]] datep" />
					</p>
					<p>
						<label>To:</label><input id="leave-to" title="To" class="validate[required, custom[dateFormat]] datep" />
					</p>
					<p><label>Reason:</label></p>
					<p><textarea id="leave-reason" title="Reason" class="validate[required] small"></textarea></p>
				</div>
			</div>
			<!--section-->
			
			<div class="section">
				<div class="row float-right">
					<a href="javascript:void(0);" class="submit-small" id="dialog-close"><span>Close</span></a>
					<a href="javascript:void(0)" class="submit-small" id="leave-add"><span>Apply</span></a>
					<div class="clear"></div>
				</div>
			</div>
			<!--section-->		
		</form>
	</div>
	<!--leave dialog-->
	
	<div id="main" class="dialog overtime-dialog">	
		<form class="form" id="form-overtime" method="POST">
			<div id="overlay" class="curve"></div>
			<!--overlay-->
			<div class="section">
				<div id="row">
					<p>
						<input style="position:absolute;z-index:-1" />
						<label>Date:</label><input id="overtime-date" title="Date" class="validate[required, custom[dateFormat]] datep" />
					</p>
					<p>
						<label>From:</label><input id="overtime-from" title="From" class="validate[required] timep" />
					</p>
					<p>
						<label>To:</label><input id="overtime-to" title="To" class="validate[required] timep" />
					</p>
					<p><label>Reason:</label></p>
					<p><textarea id="overtime-reason" title="Reason" class="validate[required] small"></textarea></p>
				</div>
			</div>
			<!--section-->
			
			<div class="section">
				<div class="row float-right">
					<a href="javascript:void(0);" class="submit-small" id="dialog-close"><span>Close</span></a>
					<a href="javascript:void(0)" class="submit-small" id="overtime-add"><span>Apply</span></a>
					<div class="clear"></div>
				</div>
			</div>
			<!--section-->		
		</form>
	</div>
	<!--overtime dialog-->
	
	<div id="main" class="dialog punch-dialog">	
		<form class="form" id="form-punch" method="POST">
			<div id="overlay" class="curve"></div>
			<!--overlay-->
			<div class="section">
				<div id="row">
					<p>
						<input style="position:absolute;z-index:-1" />
						<label>Date:</label><input id="punch-date" title="Date" class="validate[required, custom[dateFormat]] datep" />
					</p>
					<p>
						<label>Time:</label><input id="punch-time" title="Time" class="validate[required] timep" />
					</p>
					<p>
						<label>Type:</label><select id="punch-type" title="Type" class=""><option value="1">In</option><option value="0">Out</option><select/>
					</p>
					<p><label>Reason:</label></p>
					<p><textarea id="punch-reason" title="Reason" class="validate[required] small"></textarea></p>
				</div>
			</div>
			<!--section-->
			
			<div class="section">
				<div class="row float-right">
					<a href="javascript:void(0);" class="submit-small" id="dialog-close"><span>Close</span></a>
					<a href="javascript:void(0)" class="submit-small" id="punch-add"><span>Apply</span></a>
					<div class="clear"></div>
				</div>
			</div>
			<!--section-->		
		</form>
	</div>
	<!--overtime dialog-->